<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>部门管理</title>
    <!--css-->
    <link rel="stylesheet" href="/plugins/layui/dist/css/layui.css"/>
    <link rel="stylesheet" href="/css/system/animate.css"/>
    <link rel="stylesheet" href="/plugins/font-awesome-4.7.0/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap-table.min.css"/>
    <link rel="stylesheet" href="/plugins/jquery/jquery.treegrid.css"/>
    <link rel="stylesheet" href="/css/system/style.css">
    <link rel="stylesheet" href="/css/common/common.css">
    <style>
        .tab-box{
            width: 100%;
            padding: 8px;
        }
        .tab-header{
            width: 100%;
            background: #f6f6f6;
        }
        .tab-center{
            width: 100%;

        }
        .tab-list-top{
            width: 19%;
            box-sizing: border-box;
            text-align: center;
            padding: 5px;
            display: inline-block;
        }
        .tab-list{
            width: 100%;
        }
    </style>
</head>
<body>

<div style="padding: 20px; background-color: #F2F2F2;">

    <!--数据表容器-->
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-input-inline">
                <button class="layui-btn" id="add_depart_btn">
                    <i class="layui-icon">&#xe608;</i> 添加
                </button>
                <table id="departTable" data-mobile-responsive="true"/>
            </div>
        </div>
    </div>

</div>

<!--form-content-->
<div id="depart_form_content" class="form-content">
    <form class="layui-form" action="return false">
        <input type="hidden" id="parent_derpart_id" class="layui-input">
        <div class="layui-col-md8 layui-col-md-offset3">
            <label class="layui-form-label"><span style="color: #c60023;margin-right: 3px;">*</span>上级部门名称</label>
            <div class="layui-input-block">
                <input id="parent_derpart_name" type="text" autocomplete="off" class="layui-input" style="background-color: #eee;" readonly>
            </div>
        </div>
        <div class="layui-col-md8 layui-col-md-offset3">
            <label class="layui-form-label"><span style="color: #c60023;margin-right: 3px;">*</span>部门名称</label>
            <div class="layui-input-block">
                <input id="depart_name" type="text" placeholder="请输入部门名称" autocomplete="off" class="layui-input">
            </div>
        </div>
    </form>
</div>

<!--edit-form-content-->
<div id="depart_edit_form_content" class="form-content">
    <form class="layui-form" action="return false">
        <input type="hidden" id="upd_depart_id" class="layui-input">
        <div class="layui-col-md8 layui-col-md-offset2">
            <label class="layui-form-label"><span style="color: #c60023;margin-right: 3px;">*</span>上级部门名称</label>
            <div class="layui-input-block">
                <input id="upd_parent_depart_name" type="text" autocomplete="off" class="layui-input" style="background-color: #eee;" readonly>
            </div>
        </div>
        <div class="layui-col-md8 layui-col-md-offset2">
            <label class="layui-form-label"><span style="color: #c60023;margin-right: 3px;">*</span>部门名称</label>
            <div class="layui-input-block">
                <input id="upd_depart_name" type="text" placeholder="请输入部门名称" autocomplete="off" class="layui-input">
            </div>
        </div>
    </form>
</div>

<!--部门人员-->
<div id="depart_user_content" style="display: none">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-input-inline" style="width: 100%">
                <div class="tab-box">
                    <div class="tab-header">
                        <div class="tab-list-top">是否为部门管理员</div>
                        <div class="tab-list-top">用户名</div>
                        <div class="tab-list-top">邮箱</div>
                        <div class="tab-list-top">电话</div>
                        <div class="tab-list-top">状态</div>
                    </div>
                    <div id="userList" class="tab-center">

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--js-->
<script src="/plugins/jquery/jquery-2.2.4.min.js"></script>
<script src="/plugins/layui/dist/lay/modules/layer.js"></script>
<script src="/plugins/layui-v2.3.0/layui/layui.js"></script>

<script src="/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="/plugins/bootstrap/js/bootstrap-table.min.js"></script>
<script src="/plugins/bootstrap/js/bootstrap-table-mobile.min.js"></script>
<script src="/plugins/bootstrap/js/bootstrap-table-zh-CN.min.js"></script>
<script src="/plugins/jquery/jquery.treegrid.min.js"></script>
<script src="/plugins/jquery/jquery.treegrid.extension.js"></script>
<script src="/plugins/jquery/jquery.treegrid.bootstrap3.js"></script>
<script src="/plugins/jstree/jstree.min.js"></script>

<script src="/js/common/sinoUtil.js"></script>
<script src="/js/system/depart.js"></script>
</body>
</html>